<template>
<section class="content-box">
      <div>
      <!--工具条-->
      <el-col class="toolbar">
            <el-col :span="12">
                  <h2>公告</h2>
            </el-col>
            <el-col :span="12">
                  <el-form :inline="true">
                        <el-form-item>
                              <el-button type="success" class="el-icon-plus" @click="handleAdd">&nbsp;新建公告</el-button>
                        </el-form-item>
                  </el-form>
            </el-col>
      </el-col>
      <!--列表-->
      <el-table class="indexList" :data="tableData" highlight-current-row>
            <el-table-column prop="ID" label="ID" width="80" sortable>
            </el-table-column>
            <el-table-column prop="Notice_Title" label="公告标题">
            </el-table-column>
            <el-table-column prop="Notice_Content" label="公告内容">
            </el-table-column>
            <el-table-column prop="Notice_CreateBy" label="发布人">
            </el-table-column>
            <el-table-column prop="Notice_CreateDate" label="发布日期" sortable>
            </el-table-column>
            <el-table-column prop="IsShow" label="是否显示" sortable>
            </el-table-column>
            <el-table-column prop="IsHot" label="是否显示在第一条" sortable>
            </el-table-column>
            <el-table-column label="操作" min-width="100">
              <template slot-scope="scope">
                <!-- scope.$index 当前列表项index  , row 当前行的所有字段。  -->
                <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
            </el-pagination>
        </el-col>

        <!--新增界面-->
        <el-dialog title="添加" :visible.sync="addFormVisible" :modal-append-to-body="false" size="tiny">
            <el-form :model="addForm" :label-width="formLabelWidth" ref="addForm">
                <el-form-item label="公告标题：" prop="Notice_Title">
                  <el-input v-model="addForm.Notice_Title" auto-complete="off" class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="发布部门：" prop="Notice_CreateBy">
                  <el-input v-model="addForm.Notice_CreateBy" auto-complete="off" class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="是否显示：" prop="Notice_IsShow">
                  <el-switch
                  v-model="addForm.Notice_IsShow"
                  on-color="#13ce66"
                  off-color="#ff4949"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="是否显示在第一条：" prop="Notice_IsHot">          
                  <el-switch
                  v-model="addForm.Notice_IsHot"
                  on-color="#13ce66"
                  off-color="#ff4949"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="信息内容：" prop="Notice_Content">
                  <el-input
                  class="inputWidth"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="addForm.Notice_Content">
                  </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="addSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!--编辑界面-->
        <el-dialog title="编辑" :visible.sync="editFormVisible" :modal-append-to-body="false" size="tiny" key="dialog">
            <el-form :model="editForm" :label-width="formLabelWidth" ref="editForm">
                <el-form-item label="公告标题：" prop="Notice_Title">
                  <el-input v-model="editForm.Notice_Title" auto-complete="off" class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="发布部门：" prop="Notice_CreateBy">
                  <el-input v-model="editForm.Notice_CreateBy" auto-complete="off" class="inputWidth"></el-input>
                </el-form-item>
                <el-form-item label="是否显示：" prop="Notice_IsShow">
                  <el-switch
                  v-model="editForm.Notice_IsShow"
                  on-color="#13ce66"
                  off-color="#ff4949"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="是否显示在第一条：" prop="Notice_IsHot">          
                  <el-switch
                  v-model="editForm.Notice_IsHot"
                  on-color="#13ce66"
                  off-color="#ff4949"
                  >
                  </el-switch>
                </el-form-item>
                <el-form-item label="信息内容：" prop="Notice_Content">
                  <el-input
                  class="inputWidth"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="editForm.Notice_Content">
                  </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click.native="editSubmit">确 定</el-button>
            </div>
        </el-dialog>
      </div>
    </section>
</template>
<script>
import axios from "../../util/axios";
export default {
  name: "AccountSubject",
  data() {
    return {
      tableData: [], //数据列表
      addFormVisible: false, //新增界面是否显示
      editFormVisible: false, //编辑界面是否显示
      formLabelWidth: "140px", //input输入框宽度
      total: 0, //数据总数
      rows: 10, //每页显示多少条
      currentPage: 1, //当前页数
      
      filters: {
        //查询项
        name: ""
      },
      
      //新增界面数据
      addForm: {
        Notice_Title: "",
        Notice_CreateBy: "",
        Notice_IsShow: false,
        Notice_IsHot: false,
        Notice_Content:'',
      },
      //编辑界面数据
      editForm: {
        Notice_Title: "",
        Notice_CreateBy: "",
        Notice_IsShow: false,
        Notice_IsHot: false,
        Notice_Content:'',
        key: ""
      }
    };
  },

  methods: {
    changePage(page) {
      //当前页数
      this.currentPage = page;
      this.getList();
    },
    update(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("file", file, file.name); //通过append向form对象添加数据
      param.append("chunk", "0"); //添加form表单中其他数据
      console.log(param.get("file")); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }; //添加请求头
      axios.post("importAccountSubject", param, config).then(response => {
        console.log(response.data);
      });
    },
    //获取列表
    getList() {
      axios
        .post("getAnnounceList", {
          page: this.currentPage,  // 当前页数， 
          rows: this.rows, // 每页多少条
        })
        .then(data => {
          this.total = data.total; //总页数
          this.tableData = data.rows;
        })
        .catch(err => {
          console.log(err);
        });
    },
    /**
      * 查询项
      */
    handleFilterd() {
      var filterName = {
        groupOp: "OR",
        rules: [
          {
            field: "AccountItem_Name",
            op: "cn",
            data: this.filters.name
          },
          {
            field: "AccountItem_FullName",
            op: "cn",
            data: this.filters.name
          }
        ],
        groups: []
      };
      axios
        .post("getAccountSubjectList", {
          filter: JSON.stringify(filterName)
        })
        .then(data => {
          this.tableData = data.rows;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleAdd() {
      //显示新增界面
      this.addForm = {
        Notice_Title: "",
        Notice_CreateBy: "",
        Notice_IsShow: false,
        Notice_IsHot: false,
        Notice_Content:'',
      };
      this.addFormVisible = true;
    },
    //编辑
    editSubmit(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let para = Object.assign({key:this.editForm.ID}, this.editForm); //拷贝对象进去
            axios.post("AnnounceSubmitForm", para).then((res) => {
              if (!res.Success) {
                this.$message({
                  message: res.Message,
                  type: "warning",
                  duration:1200
                });
                return;
              }
              this.$message({
                message: res.Message,
                type: "success",
                duration: 1200
              });
              this.$refs["editForm"].resetFields();              
              this.editFormVisible = false; //关闭窗口
              this.getList(); //重新刷新列表
            });
          });
        }
      });
    },
    //新增
    addSubmit() {
      //提交表单
      this.$refs.addForm.validate(valid => {
        //验证
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let para = Object.assign({}, this.addForm); //拷贝对象进去
            axios.post("AnnounceSubmitForm", para).then(res => {
              if (!res.Success) {
                this.$message({
                  message: res.Message,
                  type: "warning",
                  duration:1200
                });
                return;
              }
              this.$message({
                message: res.Message,
                type: "success",
                duration: 1200
              });
              this.addFormVisible = false; //关闭窗口
              this.getList(); //重新刷新列表
              this.$refs["addForm"].resetFields();
            });
          });
        }
      }); 
    },
    //显示编辑界面
    handleEdit(key, row) {
      console.log(row,'row');
      this.editFormVisible = true;
      this.editForm = Object.assign({},row);
    },
    //删除
    handleDel(key, row) {
      this.$confirm("确认删除该信息吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          axios
            .post("DeleAnnounce", {
              key: row.ID
            })
            .then(res => {
              if (res.Success) {
                this.$message({
                  message: res.Message,
                  type: "success"
                });
                this.getList();
              } else {
                this.$message({
                  message: res.Message,
                  type: "warning"
                });
              }
            });
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getList(); //初始化页面时候就要率先执行获取列表类型接口
  }
};
</script>

<style scoped lang="scss">
@import "../../common/css/index.css";
.inputWidth {
  width: 80%;
}
</style>